<template>
  <div class="content">
    <el-form inline>
      <el-form-item label="参考系类型">
        <el-select v-model="referenceType" size="mini">
          <el-option label="WGS84" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker type="datetime" placeholder="选择开始时间" size="mini"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker type="datetime" placeholder="选择结束时间" size="mini"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="info" size="mini">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 图标 -->
    <div id="DataStatistics" style="height:57.5vh;"></div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      class="small-table"
    >
      <el-table-column prop="place" label="监测站点" width="140px" align="center"></el-table-column>
      <el-table-column prop="H" label="WGS84-H(m)" align="center"></el-table-column>
      <el-table-column prop="x" label="WGS84-x(m)" align="center"></el-table-column>
      <el-table-column prop="y" label="WGS84-y(m)" align="center"></el-table-column>
      <el-table-column prop="ChangeH" label="△H(mm)" align="center"></el-table-column>
      <el-table-column prop="Changex" label="△x(mm)" align="center"></el-table-column>
      <el-table-column prop="Changey" label="△y(mm)" align="center"></el-table-column>
      <el-table-column prop="ChangeA" label="test-△A(mm)" align="center"></el-table-column>
      <el-table-column prop="ChangeB" label="test-△B(mm)" align="center"></el-table-column>
      <el-table-column prop="number" label="统计数量(mm)" align="center"></el-table-column>
      <el-table-column prop="time" label="统计时间(mm)" width="165px" align="center"></el-table-column>
    </el-table>


    
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "DataStatistics",
  data(){
    return{
      referenceType:'WGS84',
      //表格的数据
      tableData: [{
            place:'北斗表面位移1#',
            H:'35.0071',
            x:'3560009.3320',
            y:'373522.7636',
            ChangeH:'56.9',
            Changex:'757.4',
            Changey:'-394.4',
            ChangeA:'404.1',
            ChangeB:'-752.2',
            number:'71608',
            time:'2020-09-24 00:00:00'
          },{
            place:'北斗表面位移1#',
            H:'35.0071',
            x:'3560009.3320',
            y:'373522.7636',
            ChangeH:'56.9',
            Changex:'757.4',
            Changey:'-394.4',
            ChangeA:'404.1',
            ChangeB:'-752.2',
            number:'71608',
            time:'2020-09-24 00:00:00'
          },{
            place:'北斗表面位移1#',
            H:'35.0071',
            x:'3560009.3320',
            y:'373522.7636',
            ChangeH:'56.9',
            Changex:'757.4',
            Changey:'-394.4',
            ChangeA:'404.1',
            ChangeB:'-752.2',
            number:'71608',
            time:'2020-09-24 00:00:00'
          },{
            place:'北斗表面位移1#',
            H:'35.0071',
            x:'3560009.3320',
            y:'373522.7636',
            ChangeH:'56.9',
            Changex:'757.4',
            Changey:'-394.4',
            ChangeA:'404.1',
            ChangeB:'-752.2',
            number:'71608',
            time:'2020-09-24 00:00:00'
          }
          ]
    }
  },
  mounted(){
    var myChart = echarts.init(document.getElementById('DataStatistics'));

    myChart.setOption({
      title: {
          text: '北斗站点累计变形分析(WGS84)',
          left:'39.5%'
      },
      legend: {
          top:'30px',
          data:[{
              name:'x平移',
          },
          {
              name:'y平移'
          },
          {
              name:'H下沉'
          }]
      },toolbox: {
        feature: {
          saveAsImage: {}
        },
        right:'2%',
        top: '2%'
      },
      grid:{
        left: '3%',
        right:'2%',
        bottom:'1%'
      },
      tooltip: {},
      dataset: {
          source: [
              ['product', 'x平移', 'y平移', 'H下沉'],
              ['北斗表面位移1#', 750, -400, 50],
              ['北斗表面位移2#', 430, -280, 150],
              ['北斗表面位移3#', 700, -350, -150],
              ['北斗表面位移4#', 720, -305, -50],
              ['北斗表面位移5#', 320, -15, -60],
              ['北斗表面位移6#', 890, -290, -170],
              ['北斗表面位移7#', 70, -60, 10],
          ]
      },
      xAxis: {
          type: 'category'
      },
      yAxis: {
          name:'位移(mm)',
          max:function (v) {
            return Math.round(v.max);
          },
          min:function (v) {
            return Math.round(v.min);
          },
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
          {type: 'bar',itemStyle:{color:'#018200'}},
          {type: 'bar',itemStyle:{color:'#0200fe'}},
          {type: 'bar',itemStyle:{color:'#81007f'}}
      ]
    })
  }
}
</script>

<style scoped>
  .content {
    height: 83vh;
  }
</style>

<style>
  .small-table td,.small-table th{
    padding: 8px 0;
  }
  .small-table th{
    font-size: 14px;
  }
  .small-table th>.cell,.small-table td>.cell{
    line-height: 16px;
  }
  .el-form-item{
    margin-bottom: 0;
  }
</style>
